{% extends 'app.html' %}

{% block title %}Wunjo{% endblock %}

{% block nav %}{{ _('Workspace') }}{% endblock %}

{% block head %}
<!-- tensorflowjs-web -->
<script  src="{{ url_for('static', filename='index/js/tensorflow/tfjs.js') }}"></script> <!-- Include TensorFlow.js -->
<script src="{{ url_for('static', filename='index/js/tensorflow/universal-sentence-encoder.js') }}" async></script> <!-- Include Universal Sentence Encoder model -->
{% endblock %}

{% block menubar %}
{% endblock %}

{% block sections %}
<!--In order to see menu like freeze add in class sticky else remove sticky-->
<div class="flex justify-center md:justify-between items-center top-[calc(var(--navbar-height)_+_20px_+_var(--navbar-top-mobile))] md:top-[calc(var(--navbar-height)_+_20px_+_var(--navbar-top))] transition-[top] w-full z-10 pointer-events-none mb-10">
    <div data-tour="index" data-position="bottom" data-title="{{ _('Switch view') }}" data-intro="{{ _('Switch to content to view your data. Each user can see the content they previously created based on their IP address.') }}" data-step="2" class="flex items-center p-1 rounded-[.625rem] gap-2 relative bg-dark-pop-up pointer-events-auto shadow-floating-button">
        <div class="w-24 h-9 py-2 rounded-md absolute z-0 top-1 transition-transform bg-accent-primary" style="transform:translateX(calc(0% + 0px))"></div>
        <a class="font-extra-thick transition-[color] relative z-10 w-24 h-9 py-2 text-center rounded-md text-dark-background font-alumni text-heading-3" href="/">{{ _('Explore') }}</a>
        <a class="font-extra-thick transition-[color] relative z-10 w-24 h-9 py-2 text-center rounded-md text-white font-alumni text-heading-3" href="/content">{{ _('Content') }}</a>
    </div>
</div>

<div class="flex flex-col gap-1 md:gap-5 tablet:gap-10">
    <div class="hidden-on-touchscreen h-[11.25rem]"></div>
    <div class="p-2">
        <div class="py-1 relative max-w-2xl" style="margin: 0 auto;width: auto;">
            <div data-tour="index" data-position="bottom" data-title="{{ _('Smart search') }}" data-intro="{{ _('For advanced tasks, utilize the smart search feature. Discover recommendations like') }} <text class='text-accent-primary'>{{ _('record a song fragment with a cloned voice') }}</text>, <text class='text-accent-primary'>{{ _('analysis content') }}</text>,  <text class='text-accent-primary'>{{ _('create a talking person from scratch') }}</text> {{ _('and etc. If you don’t find the help you need, contact to at support@wunjo.online.') }}<br><br>{{ _('Additionally, explore') }} <a href='https://boosty.to/wunjo' target='_blank' rel='noopener noreferrer' class='underline cursor-pointer'>Boosty</a> {{ _('or') }} <a href='https://www.patreon.com/c/wladradchenko' target='_blank' rel='noopener noreferrer' class='underline cursor-pointer'>Patreon</a> {{ _('for exclusive video tutorials to master advanced features.') }}" data-step="5"  class="flex relative min-h-[3rem] pxy-br view-dark-background rounded-2xl">
                <button class="group module-search-button flex items-center pr-2 pl-2 h-10 w-11">
                    <i class="text-xl fa-solid fa-magnifying-glass opacity-60 group-hover:opacity-100"></i>
                </button>
                <div class="flex h-10 flex-wrap flex-1 items-center">
                    <input class="module-search-input text-xl font-extra-thick w-full bg-transparent opacity-60 outline-none invalid:focus:border-danger-primary" type="text" placeholder="{{ _('What can I help with? (Any language)') }}">
                </div>
            </div>
            <div data-tour="index" data-position="bottom" data-title="{{ _('Quick tips for best results') }}" data-intro="{{ _('Each module includes easy-to-follow tips to help you achieve the best quality outcomes. Start here for straightforward guidance tailored to your needs.') }}" data-step="4" style="border-bottom: 1px solid #464646; border-image: linear-gradient(to right, transparent, #464646, #464646, #464646, transparent) 1;" class="pt-5 flex flex-row">
                <button class="module-buttons-left text-[1.25rem] mr-5"><i class="fa-solid fa-chevron-left"></i></button>
                <div style="overflow-x: hidden; text-wrap: nowrap;-webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);" class="justify-center font-extra-thick transition-[color] text-white font-alumni text-heading-3">
                    <div class="module-buttons flex flex-row gap-5">
                        <button class="py-5">{{ _('Live portrait') }}</button>
                        <button class="py-5">{{ _('Face swap') }}</button>
                        <button class="py-5">{{ _('Lip sync') }}</button>
                        <button class="py-5">{{ _('Enhancement') }}</button>
                        <button class="py-5">{{ _('Remove object') }}</button>
                        <button class="py-5">{{ _('Remove background') }}</button>
                        <button class="py-5">{{ _('Generation content') }}</button>
                        <button class="py-5">{{ _('Restyling visual') }}</button>
                        <button class="py-5">{{ _('Clone voice') }}</button>
                        <button class="py-5">{{ _('Audio separator') }}</button>
                        <button class="py-5">{{ _('Highlights') }}</button>
                    </div>
                </div>
                <button class="module-buttons-right text-[1.25rem] ml-5"><i class="fa-solid fa-chevron-right"></i></button>
            </div>
        </div>
    </div>

    <div class="view-modules grid gap-10 w-full mx-auto grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3">
    </div>
</div>

<script>
    function initScript() {
        // Parse the query string and get the search parameters
        const paramsUrl = new URLSearchParams(window.location.search);

        // Check if a parameter exists in the URL
        if (paramsUrl.has('message')) {
            // If email is set open modal feedback
            createModalMessage(paramsUrl.get('message'));
        };

        // Run animation grayscale
        moduleTileAnimation();

        // Tour for new users
        const tour = {{ tour|tojson|safe }};
        const invalidPath = {{ invalid_path|tojson|safe }};
        if (invalidPath === true) {
            createModalInvalidPathMessage();
        };
        if (tour === true && invalidPath === false) {
            setTimeout(() => {
                startDataTour('index', true);
            }, 100);
        };

        // Update button index logical
        const scriptIndex = document.createElement('script');
        scriptIndex.src = "{{ url_for('static', filename='index/js/index.min.js') }}";
        document.body.appendChild(scriptIndex);
    };
</script>
{% endblock %}